<!-- 物业缴费清单列表 -->
<template>
	<div class="app-container">
		<div class="wx-user-box">
			<div class="app-title">物业缴费清单列表</div>
			<el-form :inline="true" :model="formInline" class="demo-form-inline">
				<el-form-item label="订单号">
					<el-input v-model="formInline.order_no" placeholder="请输入订单号查询" clearable @change="sousuo()">
					</el-input>
				</el-form-item>
				<el-form-item label="缴费状态">
					<el-select v-model="formInline.state" placeholder="请选择" clearable @change="sousuo()">
						<el-option label="未缴费" value="1"></el-option>
						<el-option label="已缴费" value="2"></el-option>
						<!-- <el-option label="缴费逾期" value="3" ></el-option> -->
					</el-select>
				</el-form-item>
				<el-form-item label="支付类型">
					<el-select v-model="formInline.pay_type" placeholder="请选择" clearable @change="sousuo()">
						<el-option label="微信支付" value="1"></el-option>
						<el-option label="现金" value="2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="物业">
					<el-select v-model="formInline.wuye_id" placeholder="请选择" clearable @change="loadXiaoQuList()">
						<el-option :label="item.wy_name" :value="item.id" v-for="(item, index) in wuyeList"
							:key="index"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="小区">
					<el-select v-model="formInline.xiaoqu_id" placeholder="请选择" clearable @change="sousuo()">
						<el-option :label="item.xq_name" :value="item.id" v-for="(item, index) in xiaoquList"
							:key="index"></el-option>
					</el-select>
				</el-form-item>
				<!-- <el-form-item label="缴费类型">
					<el-select v-model="formInline.type_id" placeholder="请选择" clearable @change="sousuo()">
						<el-option :label="item.type_name" :value="item.id" v-for="(item, index) in payTypes" :key="index"></el-option>
					</el-select>
				</el-form-item> -->
				<el-form-item label="时间筛选">
					<el-date-picker v-model="date" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
						start-placeholder="开始日期" end-placeholder="结束日期" @change="sousuo()"></el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="sousuo()" icon="el-icon-search">查询/筛选</el-button>
				</el-form-item>
			</el-form>

			<el-table :data="tableData" style="width: 100%" border>
				<el-table-column prop="order_id" label="订单号"></el-table-column>
				<!-- <el-table-column prop="pay_user_name" label="支付人"></el-table-column> -->
				<el-table-column prop="address" label="房源地址"></el-table-column>
				<el-table-column prop="pay_bill_type" label="缴费类型"></el-table-column>
				<el-table-column prop="wy_name" label="所属物业">
					<template slot-scope="scope">
						{{wuyeBoj[scope.row.wuye_id]}}
					</template>
				</el-table-column>
				<el-table-column prop="xq_name" label="所属小区">
					<template slot-scope="scope">
						{{xiaoquBoj[scope.row.xiaoqu_id]}}
					</template>
				</el-table-column>
				<el-table-column prop="wy_name" label="缴费周期" width="110px">
					<template slot-scope="scope">
						{{getTime(scope.row.pay_ment_start)}}至{{getTime(scope.row.pay_ment_end)}}
					</template>
				</el-table-column>

				<el-table-column prop="create_time" label="账单生成时间" width="110px">
					<template slot-scope="scope">
						<div style="width: 80px;">
							{{scope.row.create_time}}
						</div>
					</template>
				</el-table-column>

				<el-table-column label="支付时间" width="100px">
					<template slot-scope="scope">
						{{scope.row.pay_time}}
					</template>
				</el-table-column>
				<el-table-column label="账单截止时间" width="110px">
					<template slot-scope="scope">
						{{getTime(scope.row.deadline_time)}}
					</template>
				</el-table-column>
				<el-table-column label="账单状态" width="80px">
					<template slot-scope="scope">
						<el-tag type="danger" v-if="scope.row.pay_state == 1">未缴费</el-tag>
						<el-tag type="primary" v-else-if="scope.row.pay_state == 2">已缴费</el-tag>
						<!-- <el-tag type="warning" v-else-if="scope.row.state == 3">逾期</el-tag>
						<el-tag type="danger" v-else>错误</el-tag> -->
					</template>
				</el-table-column>
				<el-table-column label="支付类型" width="100px">
					<template slot-scope="scope" v-if="scope.row.pay_state == 2">
						{{scope.row.pay_mode == 1 ? '微信支付':'现金支付'}}
					</template>
				</el-table-column>
				<el-table-column label="金额" width="110px">
					<template slot-scope="scope">
						<div style="width: 80px;">
							￥{{scope.row.total_amount}}
						</div>
					</template>
				</el-table-column>
			</el-table>
			<div class="el-pagination">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="page" :page-sizes="[10, 100, 200, 300, 400]" :page-size="size"
					layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	import Api from '@/api/pages/pay-the-fees/index.js';
	import wuyeApi from '@/api/pages/wuye/wuye.js';
	import xiaoquApi from '@/api/pages/wuye/house.js';
	export default {
		name: 'pay-the-fees_list',
		data() {
			return {
				formInline: {
					order_no: '',
					wuye_id: '',
					xiaoqu_id: '',
					state: '',
					xiaoqu_id: '',
					pay_type: ''
				},
				form: {},
				page: 1,
				size: 10,
				total: 0,
				date: [],
				tableData: [],
				wuyeList: [],
				wuyeBoj: {},
				xiaoquList: [],
				xiaoquBoj: {},
				payTypes: [],
			};
		},
		mounted() {
			this.loadXiaoQuList();
			this.getWuyeList();
			// this.getWuyePayTypes();
			this.getData();
		},
		methods: {
			getData() {
				let data = {
					pageNumber: this.page,
					pageSize: this.size
				};
				if (this.formInline.order_no) {
					data['order_no'] = this.formInline.order_no;
				}
				if (this.formInline.pay_type) {
					data['pay_type'] = this.formInline.pay_type;
				}
				if (this.formInline.wuye_id) {
					data['wuye_id'] = this.formInline.wuye_id;
				}
				if (this.formInline.xiaoqu_id) {
					data['xiaoqu_id'] = this.formInline.xiaoqu_id;
				}
				if (this.formInline.state) {
					data['state'] = this.formInline.state;
				}
				if (this.formInline.type_id) {
					data['type_id'] = this.formInline.type_id;
				}
				if (this.date && this.date.length) {
					data['start_time'] = this.date[0] + ' 00:00:00';
					data['end_time'] = this.date[1] + ' 23:59:59';
				}

				Api.query(data).then(res => {
					if (res.state) {
						this.tableData = res.data.list;
						this.total = res.data.totalRow;
					} else {
						this.$message(res.msg);
					}
				});
			},
			// 修改搜索状态
			upallow(id) {
				Api.upallow({
					xiaoqu_id: id
				}).then(res => {
					if (res.state) {
						this.$message({
							message: res.msg,
							type: 'success'
						});
					} else {
						this.$message(res.msg);
					}
					this.getData();
				});
			},
			// 获取小区
			loadXiaoQuList() {
				xiaoquApi
					.loadXiaoQuList({
						wyId: this.formInline.wuye_id
					})
					.then(res => {
						if (res.state) {
							if (res.data.findIndex(item => item.id == this.formInline.xiaoqu_id) == '-1') {
								this.formInline.xiaoqu_id = '';
								res.data.forEach(item => {
									this.xiaoquBoj[item.id] = item.xq_name;
								})
							}
							this.xiaoquList = res.data;
						} else {
							this.$message(res.msg);
						}
						this.getData();
					});
			},
			// 获取物业公司
			getWuyeList() {
				wuyeApi.getWuyeList().then(res => {
					if (res.state) {
						res.data.forEach(item => {
							this.wuyeBoj[item.id] = item.wy_name;
						})
						this.wuyeList = res.data;
					} else {
						this.$message(res.msg);
					}
				});
			},
			// 获取缴费类型
			getWuyePayTypes() {
				Api.getWuyePayTypes().then(res => {
					if (res.state) {
						this.payTypes = res.data;
					} else {
						this.$message(res.msg);
					}
				});
			},
			// 打开修改搜索状态询问
			openShitch(id) {
				this.$confirm('您确定对当前搜索状态进行修改吗?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						this.upallow(id);
					})
					.catch(() => {});
			},
			sousuo() {
				this.page = 1;
				this.getData();
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.size = val;
				this.getData();
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.page = val;
				this.getData();
			},
			getTime(str) {
				if (str) {
					return str.slice(0, 10);
				}
				return ''
			}
		}
	};
</script>
<style lang="scss" scoped></style>

<style lang="scss">
	.dialogVideo {
		.el-dialog__body {
			padding: 20px;
		}
	}
</style>
